<template>
    <div>
        <!--4.21 模块三部分： 头部 侧边栏 中心主体 -->
        <el-container>
            <el-header height="70px"> 商城大型后台管理系统 111
                <div class="name">欢迎您登录后台：{{ $store.getters.getUser.username }}
                    <el-button @click="loginout" type="danger" size="mini">退出后台登录</el-button>
                </div>
            </el-header>

            <el-container>

                <el-aside width="250px">
                    <!-- 侧边栏 -->
                    <vNav></vNav>
                </el-aside>
                <el-main>
                    <!-- 设置二级路由出口 -->
                    <router-view></router-view>
                </el-main>
            </el-container>

        </el-container>
    </div>
</template>

<script>
import vNav from '../components/vNav'

export default {
    data() {
        return {};
    },
    components: { vNav },
    methods: {
        loginout() {
            this.$store.dispatch('changeUserInfo', false)
            this.$router.push('/login')
        }
    },
    mounted(){
      
    }

}
</script>

<style lang="less" scoped>
.el-header {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    // line-height: 60px;
}

.el-aside {
    background-color: #D3DCE6;
    // color: #333;
    // text-align: center;
    // line-height: 200px;
}

.el-main {
    // background-color: #E9EEF3;
    // color: #333;
    // text-align: center;
    // line-height: 160px;
    min-height: 500px;
}
</style>